﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Click Test</title>
</head>
<body style="position:fixed;height:100%;width:100%;text-align:center;">
    <div id="div1" style="position:relative;top:0;left:0;height:50%;width:100%;background-color:Red;z-index:2;"></div>
    <div id="div2" style="position:relative;top:0;left:0;height:50%;width:100%;background-color:Blue;z-index:1;"></div>
    
    <script type="text/javascript">
        var id = null;

        function MouseDownParent(e) {
//            document.getElementById("div2").style.zIndex = document.getElementById("div1").style.zIndex + 1;
            id = setTimeout(
                function() {
                    alert(1);
                }
                , 3000
            );
        }
//        function MouseDownChild(e) {
//            document.getElementById("div1").style.zIndex = document.getElementById("div2").style.zIndex + 1;
//        }

        function MouseUp(e) {
            clearTimeout(id);
        }

        document.getElementById("div1").onmousedown = MouseDownParent;
        document.getElementById("div1").onmouseup = MouseUp;
        document.getElementById("div1").onmouseout = MouseUp;
//        document.getElementById("div2").onmousedown = MouseDownChild;
//        document.getElementById("div2").onmouseup = MouseUp;

    </script>
</body>
</html>
